import { Component, Fragment } from "react";

class TodoList extends Component{
    constructor(props){
        super(props)
        this.state={
            inputValue:'jspang',
            list:['头部按摩','我尽量快奥德赛']
        }
    }

    render(){
        return (
            //flex
            <Fragment>
                <div>
                    <input type="text" value={this.state.inputValue} onChange={this.handleValueChange.bind(this)} />
                    <button onClick={this.handleClick.bind(this)}>增加服务</button>
                </div>
                <ul>
                    {this.state.list.map((el,index) => (
                    <li
                    style={{'cursor':'pointed'}} 
                    key={index+el} 
                    onClick={this.handleDel.bind(this,index)}
                    dangerouslySetInnerHTML={{__html:el}}
                    >
                    </li>
                        )
                        
                    )}  
                </ul>

            </Fragment>
        )
    }

    handleValueChange({target:{value}}){
        this.setState({
            inputValue:value
        })

    }
    handleClick(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        })
    }
    handleDel(idx){
        console.log(idx);
        this.setState({
            list:[...this.state.list.toSpliced(idx,1)]
        })
    }
}
export default TodoList